<template>
  <div class="menunav">
    <div class="nav">
      <a href="#/home">Home</a>
      <a href="#/people">People</a>
      <!-- <a href="#/research">Research</a> -->
      <a href="#/publications">Publications</a>
      <!-- <a href="#/resources">Resources</a> -->
      <!-- <a href="#/course">Course</a> -->
      <!-- <a href="#/videos">Videos</a> -->
      <a href="#/contact">Contact</a>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.menunav {
  background: #04539a;
  width: 100%;
  margin: 0 auto;
  min-width: 100%;
}
.nav {
  height: 50px;
  line-height: 50px;

  margin: 0 auto;
  text-align: center;
  a {
    color: #fff;
    text-decoration: none;
    padding: 0 20px;
    font-size: 20px;
    display: inline-block;
  }
  a:hover { background: #000; }
}
</style>
